<template>
  <div id="app">
		<div id="login">
			<div id="left">
						<img src="../../assets/login/register.jpg" alt="">
					</div>
					<div id="right">
						<div class="dl">
							登录
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入邮箱"
							type="text"
							v-model="name"
							prefix-icon="el-icon-s-custom"
							>	
							</el-input>
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入密码"
							v-bind:show-password="isshow"
							type="text"
							v-model="password"
							prefix-icon="el-icon-unlock"
							>							
							</el-input>
						</div>
						<div class="btn">
							<el-button
							style="width: 100%;
							height: 40px;
							color: white;
							
							background-color: #333333;"
							v-bind:round="round"
							@click='login'
							>
								登录
							</el-button>
						</div>
						<div class="bot">
							<div>
								<span>忘记密码?</span>
							</div>
							<div>
								<span @click='getregister'>免费注册</span>
							</div>
						</div>
					</div>			
		</div>		
  </div>
</template>

<script>
	export default{
		data(){
			return{
				name:'',
				password:'',
				isshow:true,
				round:true
			}
		},
		methods:{
			getregister(){
				console.log(location.href)
				window.location.href="http://localhost:8080/register.html"
		},
		login(){
			this.axios({
				method:'post',
				url:'http://129.28.184.223:8080//login.do',
				data:{
					userEmail:this.name,
					userPassword:this.password
				}
			}).then(function(res){
				if(res.data.msg==1){
					var token=res.data.token;
					var userID=res.data.id
					localStorage.setItem('token', token);
					localStorage.setItem('userID',userID)
					location.href='index.html'					
				}else{
					alert('账号或者密码错误')
				}
			}).catch((err)=>{
				console.log(err);
			})
		}
	}
}
</script>

<style lang="less">
@import '../../theme/style.less';
</style>
<style>
	input:disabled{
		background-color: white;
	}
	#app{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	#left,#right{
		display: inline-block;
		width: 45%;
		margin: 2%;
		vertical-align: top;
	}
	#left img{
		width: 90%;
	}
	#right{
		padding: 30px 0;
		font-size: 15px;
	}
	#right .dl{
		font-weight: bold;
		font-size: 20px;
		color: #666666;
		margin-bottom: 70px;
	}
	
	input.el-input__inner{
		overflow: hidden;
		margin-left:30px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		border: none;
		width: 80%;
		}
		.el-input__prefix{
			width: 30px;
			height: 30px;
		}
		i::before{
			font-size: 30px;
			line-height: 30px;
			margin-bottom: 0;
		}
		.btn{
			margin-top:30px;
			width: 80%;
			height: 40px;
		}
		.cen{
			margin-top: 20px;
		}
		.bot{
			width: 80% ;
			margin: 0;
			margin-top: 10px;
			display: flex;
			flex-direction:row;
			justify-content: space-between;
		}
		.bot div{
			font-size: 12px;
			color: #999;
			flex: 1;
		}
		.bot div:nth-child(2){
			text-align: right;
			color: #333;
		}
		.bot div span{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
</style>
